<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="/assets/fonts/iconfont.css">
    <link rel="stylesheet" type="text/css" href="index.css">
    <title>滑动切换登录注册</title>
</head>
<body>
 <div class="body-container">
    <div class="form-container sign-in-container">
        <h1>用户登录</h1>
        <span>欢迎来到登录界面！</span>
        <input type="text" name="name-signin" id="username-signin" placeholder="用户名">
        <input type="password" name="pwd-signin" id="password-signin" placeholder="密码">
        <div class="signway">
            <span>快捷登录：</span>
            <a href="#"><i class="iconfont icon-QQ"></i></a>
            <a href="#"><i class="iconfont icon-xinlangweibo"></i></a>
            <a href="#"><i class="iconfont icon-weixin"></i></a>
            <a href="#"><i class="iconfont icon-github"></i></a>
        </div>
        <button class="sign-in-button">登录</button>
    </div>
    <div class="form-container sign-up-container">
        <h1>用户注册</h1>
        <span>欢迎来到注册界面！</span>
        <input type="text" name="name" id="username" placeholder="用户名">
        <input type="password" name="pwd" id="password" placeholder="密码">
        <button class="sign-up-button">注册</button>
    </div>
    <div class="overlay-container">
        <div class="overlay sign-in-overlay">
            <p>还没注册账号？</p>
            <button class="overlay-signin">点击注册</button>
        </div>
        <div class="overlay sign-up-overlay">
            <p>已经注册账号？</p>
            <button class="overlay-signup">点击登录</button>
        </div>
    </div>
 </div>   
</body>
<script src="index.js"></script>
</html>